<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style-type: none;
        }
        
        .dowebok {
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
    <link rel="stylesheet" href="./styles/style.min.css">
    <link rel="stylesheet" href="./styles/font-awesome.min.css">
    <script src="./script/jquery.min.js"></script>
    <script src="./script/jquery.slidizle.js"></script>
</head>

<body>
    <div class="dowebok" data-slidizle>
        <ul data-slidizle-content>
            <li style="background-image: url('./images/01.jpg')"></li>
            <li style="background-image: url('./images/02.jpg')"></li>
            <li style="background-image: url('./images/03.jpg')"></li>
        </ul>

        <div data-slidizle-next>
            <i class="fa fa-arrow-right"></i>
        </div>
        <div data-slidizle-previous>
            <i class="fa fa-arrow-left"></i>
        </div>

        <ul data-slidizle-navigation></ul>
    </div>
    <script>
        // $('.dowebok').slidizle();
        $('.dowebok').slidizle({
            loop: true
        });
    </script>
</body>

</html>